<script setup lang="ts">
import ResizeObserver from 'resize-observer-polyfill';
const cardRef = ref<HTMLDivElement>();

const box = reactive({
  width: 0,
  height: 0,
});
const observer = new ResizeObserver((entries) => {
  box.height = entries[0].borderBoxSize[0].blockSize;
  box.width = entries[0].borderBoxSize[0].inlineSize;
});
onMounted(() => {
  observer.observe(cardRef.value!);
});
onUnmounted(() => {
  observer.unobserve(cardRef.value!);
});
</script>

<template>
  <div ref="cardRef" class="Bcard1">
    <svg class="cardSvg" :="box">
      <path
        fill="transparent"
        stroke="var(--C-M1)"
        :d="`M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
            L ${box.width - 20} 10 L ${box.width - 5} 25
            L ${box.width - 5} ${box.height - 5} L 20 ${box.height - 5}
            L 5 ${box.height - 20} L 5 20`"
      ></path>
      <path
        fill="transparent"
        stroke-width="3"
        stroke-linecap="round"
        stroke-dasharray="10, 5"
        stroke="var(--C-M1)"
        d="M 16 9 L 61 9"
      ></path>
      <path
        fill="transparent"
        stroke="var(--C-M1)"
        d="M 5 20 L 5 10 L 12 3  L 60 3 L 68 10"
      ></path>
      <path
        fill="transparent"
        stroke="var(--C-M1)"
        :d="`M ${box.width - 4} ${box.height - 40} L ${box.width - 4} ${
          box.height - 4
        } L ${box.width - 40} ${box.height - 4}`"
      ></path>
    </svg>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Bcard1 {
  position: relative;
  padding: var(--gap-md);
  padding-top: var(--gap-xl);
  padding-bottom: var(--gap-lg);
  width: 100%;
  .cardSvg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .content{
    position: relative;
  }
}
</style>
